import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/alarm/alarm_logic.dart';
import 'package:share_fit/app/controllers/device/alarm/alarm_state.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class AlarmRepeatPage extends StatelessWidget {

  final logic = Get.put(AlarmLogic());

  @override
  Widget build(BuildContext context) {
    return PopScope(
        canPop: false,
        onPopInvoked: (didPop)=>(logic.onDidPop(didPop)),
        child: Scaffold(
        // backgroundColor: ColorConst.mainBgColor,
        appBar: AppBar(
          // backgroundColor: ColorConst.mainBgColor,
          title: Text(LocaleKeys.alarm_repeat.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
          centerTitle: true,
          leading: BackBtnIcon(onTap: () => logic.onDidPop(false)),
          // leading: IconButton(
          //   padding: EdgeInsets.only(left: 40.w,),
          //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
          //   onPressed: () {logic.onDidPop(false);},
          // ),
          // leadingWidth: 70.w,
        ),
        body: SingleChildScrollView(
          child: Container(
            margin: EdgeInsets.fromLTRB(42.w, 104.h, 42.w, 150.h),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10)
            ),
            child: Column(
              children: [
                _buildItem(LocaleKeys.alarm_monday.ts, AlarmState.alarmRepeat1Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat1Id, !logic.state.alarmRepeat1);
                }),
                Divider(height: 1.h,),
                _buildItem(LocaleKeys.alarm_tuesday.ts, AlarmState.alarmRepeat2Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat2Id, !logic.state.alarmRepeat2);
                }),
                Divider(height: 1.h,),
                _buildItem(LocaleKeys.alarm_wednesday.ts, AlarmState.alarmRepeat3Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat3Id, !logic.state.alarmRepeat3);
                }),
                Divider(height: 1.h,),
                _buildItem(LocaleKeys.alarm_thursday.ts, AlarmState.alarmRepeat4Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat4Id, !logic.state.alarmRepeat4);
                }),
                Divider(height: 1.h,),
                _buildItem(LocaleKeys.alarm_friday.ts, AlarmState.alarmRepeat5Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat5Id, !logic.state.alarmRepeat5);
                }),
                Divider(height: 1.h,),
                _buildItem(LocaleKeys.alarm_saturday.ts, AlarmState.alarmRepeat6Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat6Id, !logic.state.alarmRepeat6);
                }),
                Divider(height: 1.h,),
                _buildItem(LocaleKeys.alarm_sunday.ts, AlarmState.alarmRepeat7Id, onTap: (){
                  logic.updateAlarmRepeat(AlarmState.alarmRepeat7Id, !logic.state.alarmRepeat7);
                }),
              ],
            ),
          ),
        ),
      ));
  }

  Widget _buildItem(String title, String id, {onTap}) {
    Widget widget = GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: onTap,
      child: Container(
        height: 174.h,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              padding: EdgeInsets.only(left: 60.w),
              child: Text(title, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),),
            ),
            Container(
                padding: EdgeInsets.only(left: 60.w),
                child: GetBuilder<AlarmLogic>(
                    id: id,
                    builder: (_){
                      return Container(
                        margin: EdgeInsets.only(right: 60.w),
                        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.transparent),
                        child: Visibility(
                          visible: logic.getAlarmRepeatState(id),
                          replacement: Image(
                            image:const AssetImage('assets/images/device/ic_circle_unchecked.png'),
                            width: 67.w,
                            height: 67.w,
                          ),
                          child: Image(
                            image:AssetImage('assets/images/device/ic_circle_checked.png'),
                            width: 67.w,
                            height: 67.w,
                          ),
                        ),);})
            ),
          ],),),
    );
    return widget;
  }
}